<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium">
      <el-form-item label-width="80px" label="名称搜索">
        <el-input
          v-model="formData.searchValue"
          placeholder="请输入专家姓名或工作单位"
          clearable
          suffix-icon="el-icon-search"
          :style="{ width: '100%' }"
          @change="changeTextVal"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="80px" label="所在地区">
        <area_cascader
          :orgId="formData.orgainId"
          @getOrginId="changeArea"
          :multiple="true"
        />
      </el-form-item>
      <el-form-item label-width="0">
        <span class="table_span" v-show="tableSelectedNum > 0"
          >已选中{{ tableSelectedNum }}名</span
        >
        <el-table
          ref="multipleTable"
          :data="tabelData"
          border
          style="width: 100%"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          height="300px"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="unitName" label="工作单位" align="center">
          </el-table-column>
          <el-table-column prop="areaExpertise" label="擅长领域" align="center">
          </el-table-column>
          <el-table-column prop="jobTitle" label="职称" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="手机号码" align="center">
          </el-table-column>
        </el-table>
        <span>共{{ tableNum }}名</span>
      </el-form-item>
      <el-form-item label-width="80px" label="邀约人数" prop="inviteesNumbers">
        <el-input-number
          v-model="formData.inviteesNumbers"
          controls-position="right"
          placeholder="请输入邀约人数"
          clearable
          :min="1"
          :style="{ width: '50%' }"
        ></el-input-number>
      </el-form-item>
      <!-- <el-form-item label-width="0">
        <span style="color: #aaaaaa">提示：建议邀请专家数量为奇数个</span>
      </el-form-item> -->
      <el-form-item
        style="
          padding-top: 20px;
          border-top: 1px solid #b5b5b5;
          text-align: end;
        "
      >
        <span @click="resetForm" class="close_btn">取消</span>
        <span @click="submitForm" class="close_btn addInvitationStyle"
          >确定</span
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import area_cascader from "../../common/area_cascader.vue";
import {
  getDirectionalLoad,
  getLoadByKey,
  saveDirectionalLoad,
} from "@/api/enterprise/invitation.js";
export default {
  components: { area_cascader },
  props: [],
  data() {
    return {
      loadKey: "", //后端需要的必传参数
      tabelData: [],
      tableNum: 0,
      tableSelectedNum: 0,
      resultTableData: [],
      formData: {
        searchValue: undefined,
        orgainId: [],
        inviteesNumbers: undefined,
      },
      rules: {
        inviteesNumbers: [
          {
            required: true,
            message: "请输入邀约人数",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getDirectionalLoad();
  },
  mounted() {},
  methods: {
    getDirectionalLoad() {
      let params = {
        inviteesNumbers: this.formData.inviteesNumbers,
        name: "定向",
        organIds: this.formData.orgainId
          .map((item) => item[item.length - 1])
          .join(","), //由多维数组转化成字符串形式的参数
        searchValue: this.formData.searchValue,
      };
      getDirectionalLoad(params).then((response) => {
        let { data } = response;
        this.loadKey = data.loadKey;
        this.tabelData = data.expertUserList;
        this.tableNum = data.expertUserList.length;
        localStorage.setItem("loadKey", data.loadKey);
      });
    },
    changeArea(val) {
      this.formData.orgainId = val;
      this.getDirectionalLoad();
    },
    changeTextVal(val) {
      this.formData.searchValue = val;
      this.getDirectionalLoad();
    },
    handleSelectionChange(val) {
      this.tableSelectedNum = val.length;
      this.resultTableData = val;
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        let params = {
          expertList: JSON.parse(JSON.stringify(this.resultTableData)),
          inviteesNumbers: this.formData.inviteesNumbers,
          loadKey: this.loadKey,
          name: "定向",
        };
        saveDirectionalLoad(params).then((response) => {
          getLoadByKey(params.loadKey).then((res) => {
            this.resetForm();
            let { data } = res;
            this.$emit("getResultTableData", {
              resultTableData: data.expertList,
              inviteesNumbers: data.inviteesNumbers,
              total: data.total,
            });
          });
        });
      });
    },
    resetForm() {
      this.formData.inviteesNumbers = 0;
      this.formData.orgainId = [];
      this.formData.searchValue = "";
      this.$refs["multipleTable"].clearSelection();
      this.$refs["elForm"].resetFields();
      this.$emit("cancel");
    },
    getOrgainIdOptions() {
      this.orgainIdOptions = [];
    },
  },
};
</script>
<style lang="scss" scoped>
.table_span {
  display: inline-block;
  width: 100%;
  text-align: end;
}
.addInvitationStyle {
  color: #ffffff;
  background: #4877ee;
  margin-left: 16px;
}
::v-deep label {
  font-weight: normal;
}
</style>
<style>
.close_btn {
  display: inline-block;
  cursor: pointer;
  width: 82px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 3px;
  font-size: 14px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #4877ee;
  border: 1px solid #4877ee;
}
</style>
